<template>
  <div class="favoritesCookbookView" v-if="collects.length > 0">
    <div class="top">
      <div class="left" style="position: relative">
        <div class="circle">
          <van-circle
            v-model:current-rate="currentRate"
            :rate="0"
            layer-color="#f6f6f6"
            stroke-width="200"
            stroke-linecap="butt"
            style="width: 27px; height: 27px"
          />
        </div>
        <div class="doneBox">
          <div class="undone">100%未做完</div>
          <div class="all">共{{ collects.length }}篇菜谱，已学做0篇</div>
        </div>
      </div>
      <div class="right">
        <div class="manage" @click="toManage">管理</div>
        <div class="search" @click="search">
          <van-icon name="search" />
          <div>搜索</div>
        </div>
      </div>
    </div>
    <div class="favoritesCookbooks">
      <FavoritesCookbook v-for="item in collects" :key="item" :item="item" />
    </div>
    <div class="bottom">
      <div class="line"></div>
      <div class="end">END</div>
      <div class="line"></div>
    </div>
  </div>
  <div class="favoritesCookbookView" v-else>
    <div class="bottom">您的菜谱列表有点空</div>
  </div>
</template>

<script setup lang="ts">
import FavoritesCookbook from "@/components/FavoritesCookbook.vue";
import router from "@/router";
import { ref } from "vue";

const collects = ref(JSON.parse(localStorage.getItem("collect") || "[]"));

const currentRate = ref(0);

const toManage = () => {
  // console.log("toManage");
  router.push({
    path: "/favoritesManage",
  });
};

const search = () => {
  console.log("search");
};
</script>

<style lang="scss" scoped>
.favoritesCookbookView {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .left {
      display: flex;

      .circle {
        width: 27px;
        height: 27px;
        position: absolute;
        left: 0;
        top: 0;
        flex-shrink: 0;
      }

      .doneBox {
        margin-left: 37px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;

        .undone {
          font-weight: bold;
        }

        .all {
          color: #999;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 14px;
      height: 25px;
      align-self: center;
      margin-right: 10px;

      .manage {
        margin-right: 8px;
      }

      .search {
        display: flex;
        align-items: center;
        border-left: 2px solid #999;
        padding-left: 10px;

        > div {
          margin-left: 8px;
        }
      }
    }
  }

  // .favoritesCookbooks {
  //   margin-bottom: 45px;
  // }

  .bottom {
    margin-top: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #999;

    .line {
      width: 25px;
      height: 1px;
      background-color: #e9e9e9;
    }

    .end {
      margin: 0 10px;
      font-size: 12px;
      color: #e9e9e9;
    }
  }
}
</style>
